<template>
  <div class="task-bar d-f-c" :class="[settingStore.$state.deskAppRangeType]" @contextmenu.prevent.stop>
    <template v-if="settingStore.$state.deskAppRangeType === 'win'">
      <div class="win-tools d-f-c">
        <div class="win d-f-c" @click.stop="winVisible = !winVisible">
          <span><i class="iconfont wos-win" /></span>
        </div>
        <task-modal v-model="winVisible" position-path="left">
          <win-quick-modal @close="winVisible = false" />
        </task-modal>
      </div>
      <div class="task-tools">
        <system-task-list />
      </div>
      <div class="tray" v-if="$route.path === '/default/desk'">
        <system-tray />
      </div>
      <div class="system d-f-c">
        <div class="date" @click.stop="systemDateVisible = !systemDateVisible">
          <span>{{ dateFormat('hh:mm', settingStore.$state.currentDate) }}</span>
          <span>{{ dateFormat('YYYY/MM/DD', settingStore.$state.currentDate) }}</span>
          <task-modal v-model="systemDateVisible">
            <system-date-modal />
          </task-modal>
        </div>
        <div class="notify d-f-c" @click.stop="systemNotifyVisible = !systemNotifyVisible">
          <i class="iconfont wos-system-notify" />
          <task-modal v-model="systemNotifyVisible" path="to-left">
            <system-notify-modal />
          </task-modal>
        </div>
        <div class="show-desk"></div>
      </div>
    </template>
    <template v-else-if="settingStore.$state.deskAppRangeType === 'ios'">
      <div class="ios-tools d-f ai-c jc-sb">
        <div class="win d-f ai-c" @click.stop="winVisible = !winVisible">
          <span><i class="iconfont wos-apple fs18" /></span>
          <template v-if="runningTasksStore.$state.currentTaskAppId">
            <ul class="ios-bar-list">
              <li v-for="item in iosBarList" :key="item">
                {{ $t(`iosBar.${runningTasksStore.$state.currentTaskAppId}.${item}`) }}
              </li>
            </ul>
          </template>
        </div>
        <div class="d-f ai-c">
          {{ dateFormat(`M${$t('default.mouth')}DD${$t('default.day')}`, settingStore.$state.currentDate) }}
          {{ weekFormat(settingStore.$state.currentDate) }}
          {{ dateFormat('hh:mm', settingStore.$state.currentDate) }}
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import SystemDateModal from '@/components/taskBar/systemDateModal.vue'
import SystemNotifyModal from '@/components/taskBar/systemNotifyModal.vue'
import SystemTaskList from '@/components/taskBar/systemTaskList.vue'
import SystemTray from '@/components/taskBar/systemTray.vue'
import WinQuickModal from '@/components/taskBar/winQuickModal.vue'
import { computed, ref } from 'vue'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { dateFormat, weekFormat } from '@/utils/utils'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useDeskAppStore } from '@/stores/systemApp/deskApp'

const settingStore = useSystemSettingStore()
const runningTasksStore = useRunningTasksStore()
const deskAppStore = useDeskAppStore()
const winVisible = ref<boolean>(false)
const systemDateVisible = ref<boolean>(false)
const systemNotifyVisible = ref<boolean>(false)

const iosBarList = computed(() => {
  const { currentTaskAppId } = runningTasksStore.$state
  const { deskAppList, systemAppList } = deskAppStore.$state
  if (!currentTaskAppId) return []
  const find = [...deskAppList, ...systemAppList].find((item) => item.appId === currentTaskAppId)
  return find ? find.iOSBar : []
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common.scss';
@import '@/assets/scss/theme-dark.scss';
@import '@/assets/scss/mixin.scss';

.task-bar {
  width: 100vw;
  height: $task-bar-height;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: $z-index-task-bar;
  background-color: var(--task-bar-bg-color);
  backdrop-filter: blur(10px);
  color: var(--task-bar-color);
  justify-content: space-between;

  &.ios {
    bottom: unset;
    top: 0;

    .ios-tools {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }

    .ios-bar-list {
      padding-left: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      font-weight: bolder;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
  }

  .win-tools {
    height: 100%;

    .win {
      width: 48px;
      min-width: 48px;
      height: 100%;

      &:hover {
        @include hover-model;
      }
    }
  }

  .task-tools {
    width: 100%;
    height: 100%;
  }

  .tray {
    height: 100%;
  }

  .system {
    height: 100%;

    .date {
      width: 78px;
      min-width: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;

      &:hover {
        @include hover-model;
      }
    }

    .notify {
      width: 50px;
      min-width: 50px;
      height: 100%;

      &:hover {
        @include hover-model;
      }
    }

    .show-desk {
      width: 5px;
      min-width: 5px;
      height: 100%;
      position: relative;

      &:hover {
        @include hover-model;
      }

      &::before {
        content: '';
        width: 1px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
